<template>
  <view class="spc bd">
    <titleView
      rightWords="切换社区"
      :leftWords="uniDetail.deptName || '您当前暂未选择社区'"
      rightIcon="icontubiaozhizuomoban-"
      @rightClick="checkUni"
      class="spc"
    ></titleView>
    <view class="person spd">
      <view class="headimg spd">
        <view class="spd">
          <image
            class="img img_active"
            src="../../../static/img/shequhd.png"
            mode="aspectFit"
          ></image>
        </view>
        <text class="text spd"
          >尊敬的{{ config.globalData.user.userName }}，您好！</text
        >
      </view>
    </view>
    <view class="Medical" :style="{ height: atHeight + 'rpx' }">
      <letter ref="letter" v-on:zt="ShowChild()">
        <view slot="content">
          <view class="card bd1" :style="{ height: atHeight + 'rpx' }">
            <view
              style="text-align: center; color: #18c7e1; margin-bottom: 10upx"
              class="bd1"
              >社区简介</view
            >
            <view class="art bd1 t1">
              {{ uniDetail.profile }}
            </view>
            <view style="color: #555" class="bd1 t1"
              >社区电话：{{ uniDetail.telPhone }}</view
            >
            <view style="color: #555" class="bd1 t1"
              >社区地址：{{ uniDetail.address }}</view
            >
          </view>
        </view>
      </letter>
    </view>
    <view
      :style="{ width: '100%', marginTop: atHeight + 'rpx' }"
      :class="top > 70 ? 'aa' : 'bb'"
    >
      <!-- 预约提醒 -->
      <view
        style="background-color: #f8f8f8; padding: 50upx 0 50upx"
        class="spc"
      >
        <view
          style="width: 96%; margin: 20upx auto 20upx; color: #18c7e1"
          class="spc"
        >
          <text class="iconfont iconlaba001hover" />社区提醒
        </view>
        <!-- 轮播组件 -->
        <swiperCard
          v-if="list.length"
          class="spc"
          :list="list"
          :autoplay="false"
          :effect3d="true"
          mode="none"
          :height="200"
        ></swiperCard>
        <view style="text-align: center" class="t1" v-else
          >暂无所属社区提醒消息</view
        >
      </view>
    </view>
    <!-- 社区新闻 -->
    <view class="botContent spc t1" v-if="newList.length">
      <!-- <view style="text-align: center;padding-top: 10upx;">社区新闻</view> -->
      <view
        style="text-align: center; padding: 20upx; background-color: #fff"
        class="spc"
        >社区新闻</view
      >
      <view class="new-list" style="padding-top: 0">
        <view
          v-if="newList.length > 0"
          class="new-item uni-item-line bd1"
          v-for="(v, index) in newList"
          :key="index"
          @tap="goDetail(v)"
        >
          <view class="con flex bd1">
            <view class="title bd1 t1">{{ v.title }}</view>
            <view class="flex flex-j-b bd1">
              <view class="bd1"
                ><text class="iconfont icondot1 bd1" />{{ v.source }}</view
              >
              <view class="bd1"
                ><text class="iconfont iconclock bd1" />{{ v.createTime }}</view
              >
            </view>
          </view>
          <image
            class="img"
            :src="v.imgUrl ? v.imgUrl : '../../../static/img/new1.jpg'"
            mode="aspectFill"
          >
          </image>
        </view>
        <view
          class="zanwei"
          v-if="!wHeight"
          :style="{ height: wHeight + 'upx' }"
        ></view>
      </view>
    </view>
    <view style="text-align: center; padding: 10px" v-else
      >暂无可读社区新闻</view
    >
  </view>
</template>

<script>
import titleView from "@/components/title-view/title-view.vue";
import letter from "@/components/letter.vue";
import swiperCard from "@/components/swiper-card.vue";
export default {
  components: {
    titleView,
    letter,
    swiperCard,
  },
  data() {
    return {
      list: [],
      wHeight: 0,
      uniDetail: {},
      page: {},
      newList: [],
      top: "",
      atHeight: this.$store.state.heights,
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getNewListMore(this.page.pageNum + 1);
  },
  methods: {
    ShowChild: function (data) {
      // this.data = data
      //console.log(data)
    },
    // 切换社区
    checkUni() {
      uni.navigateTo({
        url: "/pages/reg/select-dep?user=&url=/pages/health/health",
      });
    },
    scroll(top) {
      this.top = top;
      if (top >= 25) {
        this.$refs.letter.pclose(true);
      } else if (top < 25) {
        this.$refs.letter.pclose(false);
      }
    },
    // 获取社区详情
    getUniIntro() {
      let self = this;
      // debugger
      // //console.log(uni.getStorageSync('community'))
      if (uni.getStorageSync("community")) {
        self.uniDetail = JSON.parse(uni.getStorageSync("community"));
        this.config
          .post("/communityInfo/getCommunityDetail", {
            deptId: self.uniDetail.deptId,
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.$store.state.sqname = res.data.data.deptName;
              //uni.setStorageSync('community', '')
              self.uniDetail = res.data.data;
              uni.setStorageSync("community", JSON.stringify(res.data.data));
            }
          });
        // self.uniDetail.profile = res.data.data.profile
      } else {
        this.config
          .post("/communityInfo/getCommunityDetail", {})
          .then((res) => {
            //console.log(res)
            if (res.data.code === 200) {
              this.$store.state.sqname = res.data.data.deptName;
              //uni.setStorageSync('community', '')
              self.uniDetail = res.data.data;
              uni.setStorageSync("community", JSON.stringify(res.data.data));
            } else {
              if (res.data.code == "-201") {
                self.config.handleError(res.data);
              } else {
                uni.showToast({
                  title: self.config.handleError(res.data),
                  icon: "none",
                });
              }
            }
          });
      }
      self.getBallInfo();
      self.getNewList();
    },
    // 获取预约提醒
    getBallInfo() {
      let self = this;
      this.config
        .post("/message/listDept", {
          pageNum: "1",
          pageSize: "5",
          type: "2",
          toType: "1",
          communityId: self.uniDetail.deptId,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            self.list = res.data.data.list ? res.data.data.list : [];
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getMoreList() {
      //console.log('触底了')
      if (this.page.isLastPage) return;
      this.getNewListMore(this.page.pageNum + 1);
    },
    // 获取新闻列表
    getNewList(pageNumber) {
      let self = this;
      this.config
        .post("/medical/communityNews/list", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
          // communityId: this.config.globalData.user.deptId,
          // communityId: '1',
          communityId: self.uniDetail.deptId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.newList = res.data.data.list ? res.data.data.list : [];
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 获取新闻列表(更多)
    getNewListMore(pageNumber) {
      let self = this;
      this.config
        .post("/medical/communityNews/list", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
          // communityId: this.config.globalData.user.deptId,
          // communityId: '1',
          communityId: self.uniDetail.deptId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.newList = self.newList.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/child/backlog/community-news-detail?id=" + v.id,
      });
    },
    refreshPage() {
      this.getUniIntro();
      // this.getBallInfo()
      // this.getNewList()
    },
  },
  mounted() {
    this.getUniIntro();
    // this.getBallInfo()
    // this.getNewList()
    let self = this;
    this.sysInfo = uni.getSystemInfo({
      success(res) {
        self.wHeight = res.screenHeight;
      },
    });
  },
};
</script>
<style lang="less" scoped>
.page {
  height: 100%;
}

//头像部分
movable-area {
  height: 300rpx;
  width: 100%;
  background-color: #d8d8d8;
  overflow: hidden;
}

.animate {
  transition: height 0.2s ease-out;
}

.person {
  width: 100%;
  height: 300upx;
  background-color: #18c7e1;
  display: flex;
  // justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 100upx;
  z-index: 2;

  .headimg {
    width: 100%;
    display: inline-block;
    text-align: center;

    .img {
      width: 80upx;
      height: 80upx;
      border-radius: 50%;
    }

    .img_active {
      width: 110upx;
      height: 110upx;
      border-radius: 50%;
    }

    .text {
      margin-top: 5upx;
      font-size: 30upx;
      color: #ffffff;
    }
  }
}

.Medical {
  width: 100%;
  margin-top: 230upx;

  .art {
    line-height: 46upx;
    color: #555;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
  }

  .card {
    padding: 35upx 40upx 40upx 40upx;
    transition: height 0.2s linear;
  }
}

// 底部内容
.aa {
  margin-top: 100rpx;
}

.botContent {
  background-color: #f8f8f8;

  .new-list {
    padding: 20upx 20upx;

    // background-color: #FAFAFA;
    .new-item {
      display: flex;
      // margin-bottom: 10upx;
      background-color: #fff;
      padding: 20upx;
      // box-shadow: 0 0 20upx 0 #FAFAFA;
      // box-shadow: 0 0 20upx 0 #eee;
      border-radius: 20upx;
      margin: 10px 0;

      .img {
        width: 35%;
        height: 160upx;
        margin-left: 30upx;
        border-radius: 10upx;
      }

      .con {
        flex-direction: column;
        justify-content: space-between;
        margin-top: 10upx;
        width: 65%;

        .title {
          font-size: 30upx;
          font-weight: 900;
          color: #555;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .time {
          font-size: 24upx;
          color: #ccc;
          margin-top: 10upx;
        }

        .iconfont {
          color: #18c7e1;
        }
      }
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  page {
    height: calc(100vh - var(--window-top));
  }

  .bd {
    height: calc(100vh - var(--window-top));
    background-color: #000000 !important;
  }

  .t1 {
    color: #ccc !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .head {
    background-color: #2a2a2c !important;
  }

  .spc {
    background-color: #2a2a2c !important;
  }

  //信封条
  .spd {
    background-color: #1b1c1e !important;
  }

  .uitem {
    background-color: #2a2a2c !important;
  }

  .letter-box {
    background-color: #2a2a2c !important;
  }

  .flex-j-a {
    background-color: #2a2a2c !important;
  }

  .closeBtn {
    background-color: #2a2a2c !important;
  }

  uni-view.letter-item {
    background-color: #2a2a2c !important;

    .tit {
      background-color: #2a2a2c !important;
    }

    .icon {
      background-color: #2a2a2c !important;
    }
  }
}
</style>
